<template>
  <div class="goodsDetail-wrapper">
    <Breadcrumb>
      <BreadcrumbItem to="/">首页</BreadcrumbItem>
      <BreadcrumbItem to="/goods">主会场</BreadcrumbItem>
      <BreadcrumbItem :to="'/goods?kind=' + goodsData.kind_id">{{
        goodsData.kind.name
      }}</BreadcrumbItem>
      <BreadcrumbItem>{{ goodsData.title }}</BreadcrumbItem>
    </Breadcrumb>
    <div class="goodsDetail-container">
      <img :src="goodsData.image_src" />
      <div class="goodsDetail-content">
        <span class="detail-title">{{ goodsData.title }}</span>
        <div class="detail-divider" />
        <p>{{ goodsData.desc }}</p>
        <br />
        <span class="detail-title">￥{{ goodsData.price * count }}</span>
        <br />
        <br />&nbsp;
        <span>数量：</span>
        <InputNumber :max="goodsData.amount" :min="1" v-model="count" />
        <span id="stock">&nbsp;(库存：{{ goodsData.amount }})</span>
        <br />
        <Button @click="showConfirmModal" :loading="loading">
          <span v-if="!loading">立即下单</span>
          <span v-else>处理中...</span>
        </Button>
        <Divider />
        <span>上架时间：{{ goodsData.update_time }}</span>
        <br />
        <span>
          分类：
          <a href="/goods">主会场</a>,
          <a :href="'/goods?kind=' + goodsData.kind_id">{{
            goodsData.kind.name
          }}</a>
        </span>
      </div>
    </div>

    <Modal
      v-model="loading"
      :loading="loading"
      width="800"
      :styles="{ top: '300px' }"
      :mask-closable="false"
    >
      <p slot="header" style="color: #515a6e">
        <Icon type="ios-information-circle"></Icon>
        <span>&nbsp;订单确认</span>
      </p>
      <Table border :columns="columns" :data="modalData"></Table>
      订单备注(选填)：<br />
      <Input v-model="remark" size="large" placeholder="在此输入您的订单备注" />
      <div slot="footer">
        <span style="float: left">
          合计：
          <span style="color: #d35400;font-weight: bold;font-size: 24px"
            >￥{{ goodsData.price * count }}</span
          >
        </span>
        <Button @click="loading = false">取消</Button>
        <Button type="primary" @click="onConfirm">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { AuthCheck } from '../utils/mixin';

export default {
  name: 'goods_detail',
  mixins: [AuthCheck],
  data() {
    return {
      goodsData: { kind: '' },
      count: 1,
      loading: false,
      remark: '',
      columns: [
        {
          title: '商品',
          key: 'name',
          align: 'center',
        },
        {
          title: '单价',
          key: 'price',
          align: 'center',
        },
        {
          title: '数量',
          key: 'amount',
          align: 'center',
        },
        {
          title: '规格',
          key: 'kind',
          align: 'center',
        },
      ],
      modalData: [
        {
          name: '',
          age: 0,
          amount: 0,
          kind: '',
        },
      ],
    };
  },
  watch: {},
  mounted() {
    this.axios
      .get(`/api/goods?goods=${this.$route.params.id}`)
      .then((res) => (this.goodsData = res.data))
      .catch((err) => this.$Notice.error({ title: err }));
  },
  methods: {
    showConfirmModal() {
      if (this.checkLogin()) {
        this.modalData = [
          {
            name: this.goodsData.title,
            price: '￥' + this.goodsData.price,
            amount: this.count,
            kind: '常规',
          },
        ];
        this.loading = true;
      } else this.$Message.error('请先登录后再进行操作');
    },
    onConfirm() {
      this.axios
        .post('/api/order', {
          item_id: this.goodsData.id,
          buyer_id: this.$store.state.uid,
          seller_id: this.goodsData.craftsman_id,
          amount: this.count,
          remark: this.remark,
        })
        .then((res) => {
          this.loading = false;
          this.$Notice.success({
            title: '下单成功',
          });
          this.$router.push(`/order?type=goods&order_id=${res.data.order_id}`);
        })
        .catch((err) =>
          this.$Notice.error({
            title: '下单失败',
            desc: err,
          })
        );
    },
  },
};
</script>
